﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>赏花观鸟</title>
    <link rel="stylesheet" type="text/css" href="../../assets/css/iss_app_base.css"/>
    <link rel="stylesheet" type="text/css" href="../../assets/third/animate/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="../../assets/third/swiper/swiper.min.css"/>
    <style>
        .ofh{
	        overflow: hidden;
        }
        .bg_cover{
	        background-position: center;
	        -webkit-background-size: cover;
	        -moz-background-size: cover;
	        background-size: cover;
	        background-repeat: no-repeat;
        }
		body { font:12px/1 "微软雅黑", Tahoma, Helvetica, Arial, sans-serif;}
		
        .part-box-1 {padding:24px 0 0;background-image:url(../../assets/images/images-yuqing/test/banner_bg.jpg);}
        .part-box-1 img {display:block;width:95%;margin:0 auto;}
        
        .part-box-2 {}
        .part-box-2 p.p1 {top:24px;font-size:20px;color:#666;text-align:center;margin:20px 0 0;}
        .part-box-2 p.p2 {top:20px;font-size:12px;color:#aaa;text-align:center;line-height:20px;}
		.part-box-2 p.p3 { text-align:center; width:80%; margin:15px auto 30px; color:#aaa; line-height:20px; font-size:14px;}
		
		.part-box-3 { position:relative; background:url(../../assets/images/images-yuqing/test/box-3_bg.jpg) no-repeat; padding-bottom:70%; background-size:100% auto;}
		.part-box-3 .box-3_bg { top:0;}
		.part-box-3 p.p1 {top:24px;font-size:20px;color:#fff;text-align:center; position:absolute; width:100%;}
        .part-box-3 p.p2 {top:20px;font-size:12px;color:#fff;text-align:center;line-height:20px;margin:30px 0 0; position:absolute; width:100%;}
		.part-box-3 .plant { position:absolute; right:30px; margin-top:20px; color:#fff; z-index:1;}
		.part-box-3 .plant.plant1 { top:25%;}
		.part-box-3 .plant.plant2 { top:75%;}
		.part-box-3 .plant img { float:right;}
		.part-box-3 .plant span { float:right; margin-right:15px; font-size:14px;}
		.part-box-3 .plant1 span { margin-top:30px;}
		.part-box-3 .plant2 span { margin-top:10px;}
		
		.part-box-4 { position:relative; background:url(../../assets/images/images-yuqing/test/box-4_bg.jpg) no-repeat bottom; padding-bottom:90%; background-size:100% auto;}
		.part-box-4 .plant { position:absolute; left:30px; margin-top:20px; color:#666;}
		.part-box-4 .plant.plant1 { top:5%;}
		.part-box-4 .plant.plant2 { top:42%;}
		.part-box-4 .plant img { float:left;}
		.part-box-4 .plant span { float:left; margin-left:15px; font-size:14px;}
		.part-box-4 .plant1 span { margin-top:40px;}
		.part-box-4 .plant2 span { margin-top:20px;}


		.part-box-5{padding: 20px 0;}
		.part-box-5 p.p1{font-size: 20px;color: #666;text-align: center;}
		.part-box-5 p.p2{font-size: 14px;color: #aaa;text-align: center;line-height: 20px;margin-bottom: 12px;}
		.part-box-5 .swiper-slide{-webkit-background-size:  100% auto;background-size: 100% auto; padding-bottom:40%; border-radius:4px; box-shadow:0 0 4px rgba(0,0,0,.5);}
		.part-box-5 .swiper-slide a{display: block;}
		.part-box-5 .swiper-slide p{text-align: center;color: #fff;margin-top: 10px; font-size:14px;}
		
		.part-box-6 p { width:80%; text-align:justify; line-height:20px; color:#999; margin:0 auto 20px;}
		
    </style>
</head>
<body>
    <div class="views">
        <div class="view view-main">
            <div class="pages navbar-fixed">
                <div id="ecology_page" data-page="ecology" data-animate-pages="true" class="page bg-white comdetail">
                    <!-- navbar 结束 -->
                    <div class="page-content">
                        <div class="part-box-1 bg_cover ofh">
			            	<img src="../../assets/images/images-yuqing/test/banner_tit.png" class="wow zoomIn"/>
                        </div>
                    </div>
                    <div class="part-box-2 bg_cover ofh">
                        <p class="p1 wow fadeInUp">丰富的自然生态资源</p>
                        <p class="p2 wow fadeInUp">Abundant Ecological Resources</p>
                        <p class="p3 wow fadeInUp">这里山区人烟稀少，有利于野生动物繁衍，并为开拓狩猎活动提供了可能性。</p>
                    </div>
                    <div class="part-box-3 bg_cover">
                        <p class="p1 wow fadeInUp">植物资源</p>
                        <p class="p2 wow fadeInUp">Plant Resources</p>
                        <div class="plant plant1">
                            <img src="../../assets/images/images-yuqing/test/plant1.png" width="40%" class="wow fadeInRight" />
                            <span class="wow fadeInLeft">冰川杜鹃</span>
                        </div>
                        <div class="plant plant2">
                            <img src="../../assets/images/images-yuqing/test/plant2.png" width="40%" class="wow fadeInRight" />
                            <span class="wow fadeInLeft">独根草</span>
                        </div>
                    </div>
                    <div class="part-box-4 bg_cover ofh">
                        <div class="plant plant1">
                            <img src="../../assets/images/images-yuqing/test/plant3.png" width="40%" class="wow fadeInLeft" />
                            <span class="wow fadeInRight">海棠花</span>
                        </div>
                        <div class="plant plant2">
                            <img src="../../assets/images/images-yuqing/test/plant4.png" width="40%" class="wow fadeInLeft" />
                            <span class="wow fadeInRight">蝎子草</span>
                        </div>
                    </div>
                    
                    <div class="part-box-5 bg_cover ofh">
                        <p class="p1 wow fadeInUp">动物资源</p>
                        <p class="p2 wiw fadeInUp">Animal Resources</p>
                        <div class="swiper-container wow fadeInRight">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" style="background:url(../../assets/images/images-yuqing/test/animal1.jpg) no-repeat;">
                                    <a href="#">
                                        <p>黑鹤</p>
                                    </a>
                                </div>
                                <div class="swiper-slide" style="background:url(../../assets/images/images-yuqing/test/animal2.jpg) no-repeat;">
                                    <a href="#">
                                        <p>褐马鸡</p>
                                    </a>
                                </div>
                                <div class="swiper-slide" style="background:url(../../assets/images/images-yuqing/test/animal3.jpg) no-repeat;">
                                    <a href="#">
                                        <p>灰鹤</p>
                                    </a>
                                </div>
                                <div class="swiper-slide" style="background:url(../../assets/images/images-yuqing/test/animal4.jpg) no-repeat;">
                                    <a href="#">
                                        <p>鸳鸯</p>
                                    </a>
                                </div>
                                <div class="swiper-slide" style="background:url(../../assets/images/images-yuqing/test/animal5.jpg) no-repeat;">
                                    <a href="#">
                                        <p>野鸭子</p>
                                    </a>
                                </div>
                                <div class="swiper-slide" style="background:url(../../assets/images/images-yuqing/test/animal6.jpg) no-repeat;">
                                    <a href="#">
                                        <p>苍鹭</p>
                                    </a>
                                </div>
                            </div>
                            <!-- Add Pagination -->
                            <!--<div class="swiper-pagination"></div>-->
                       </div>
                    </div>

                    <div class="part-box-6 bg_cover ofh">
                    	<p class="wow fadeInUp">野三坡有很多野生动物。据调查，1950年在蓬头村有虎出现，1957年该村又捕获一只北方豹。1984年调查，在庄里、罗古台、北庄、都衙均有豹子。在庄里、罗古台、北庄、都衙、紫石口还有较多的鹰、猫头鹰、野鸡、寒号鸟、喜鹊、山鸽、乌鸦等多种飞禽；水禽有鹤、鹳、鹭鸶、水鸭等，它们在拒马河谷多次出现。</p>
                    	<img src="../../assets/images/images-yuqing/test/box_6.jpg" width="100%" class="wow zoomIn" />
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <!-- 外部链接 -->
    <script src="../../assets/third/wow/wow.js" type="text/javascript"></script>
    <script>
        new WOW().init();
    </script>
    
    <script type="text/javascript" src="../../assets/third/swiper/swiper.min.js?time=20171213174312"></script>
    <!-- Initialize Swiper -->
	<script>
	    var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        slidesPerView: 2.4,
	        paginationClickable: true,
	        spaceBetween: 6,
	        freeMode: true
	    });
    </script>

</body>
</html>
